import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import User from './component/User.jsx';
import UserList from './component/UserList.jsx';
import AddUser from './component/AddUser.jsx';
import reducer from './reducer/index.js';
import user from './model/user.js';

const store = createStore(reducer);
const root = document.getElementById('root');

const render = () => ReactDOM.render(
  <div>
    <AddUser addUser={(user) => store.dispatch(addUserAction(user))}/>
    <UserList
      users = {store.getState().users}
    />
  </div>,
  root
);

const addUserAction = (user) => {
  let { name, age, gender } = user;
  return {
    type: 'ADD_USER',
    name: name,
    age: age,
    gender: gender
  };
}

render();
store.subscribe(render);
